<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <header>
            <input type="text" v-model="name" placeholder="请输入用户名称">
            <input type="text" v-model="phone" @keyup.enter="addUser" placeholder="请输入手机号">
            <button @click="addUser">提交</button>
        </header>
        <ul>
            <li v-for="item in userList" :key="item.userid">
                {{ item.name }} -- {{item.phone}}
                <button @click="delClick(item.userid)">删除</button>
            </li>
        </ul>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                name: '',
                phone: '',
                userList: []
            }
        },
        methods: {
            addUser() {
                console.log('被添加了');

                this.userList.unshift({
                    name: this.name,
                    phone: this.phone,
                    userid: Math.random()
                })

                this.name = ''
                this.phone = ''

            },
            delClick(userid) {
                const arr = this.userList.filter(item => item.userid == userid)
                const index = this.userList.indexOf(arr[0])
                this.userList.splice(index, 1)
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>